<!DOCTYPE html>
<html lang="en">
<!--头部信息-->
<head>
    <meta charset="utf-8">
    <title>用户编辑</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">

    <script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>

    <style>
        body {
            background-color: #ffffff;
        }
    </style>

</head>
<!--用户编辑-->
<body>
<form id="edit" class="layui-form" lay-filter="test">
    <div class="layui-form layuimini-form">
        <!--编号-->
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">编号：</label>
            <div class="layui-input-block" id="userId" style="width: 80%">
                <label name="userId" class="layui-form-label-col"></label>
            </div>
        </div>


        <!--姓名-->
        <div class="layui-form-item">
            <label class="layui-form-label">姓名：</label>
            <div class="layui-input-block" style="width: 80%">
                <input type="text" name="username" id="username" lay-verify="required" lay-reqtext="姓名不能为空" placeholder="请输入姓名"
                       value="" class="layui-input">
            </div>
        </div>

        <!--性别-->
        <div class="layui-form-item">
            <label class="layui-form-label">性别：</label>
            <div class="layui-input-block" id="ssex" style="width: 80%">
                <input type="radio" name="ssex" value="男" title="男" checked="">
                <input type="radio" name="ssex" value="女" title="女">
            </div>
        </div>


        <!--年龄-->
        <div class="layui-form-item">
            <label class="layui-form-label ">年龄：</label>
            <div class="layui-input-block" style="padding-left: 8px;padding-top: 17px;width: 79.7%">
                <div id="age" class="demo-slider"></div>
            </div>
        </div>


        <!--电话-->
        <div class="layui-form-item" style="margin-top: -10px">
            <label class="layui-form-label">电话：</label>
            <div class="layui-input-block" style="width: 80%">
                <input name="mobile" id="mobile" type="text" lay-verify="number" class="layui-input">
            </div>
        </div>


        <!--邮箱-->
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱：</label>
            <div class="layui-input-block" style="width: 80%">
                <input name="email" id="email" type="email" lay-verify="email" class="layui-input">
            </div>
        </div>


        <!--部门-->
        <div class="layui-form-item">
            <label class="layui-form-label ">部门：</label>
            <div class="layui-input-block" style="width: 80%">
                <select name="deptId" id="deptId">
                    <option value="" disabled="disabled">请选择</option>
                </select>
            </div>
        </div>


        <!--描述-->
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">用户描述：</label>
            <div class="layui-input-block" style="width: 80%">
                <textarea placeholder="请输入内容" class="layui-textarea" name="description" id="description"
                          style="height: 50px;resize:none;"></textarea>
            </div>
        </div>


        <!--保存按钮-->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">保存</button>
            </div>
        </div>
    </div>
</form>


<!--隐藏域-->
<div style="display: none">
    <input type="text" value="" id="deptIds">
    <input type="text" value="" id="ages">
    <input type="text" value="" id="sex">
</div>


<script>
    layui.use(['form', 'layer', 'jquery', 'slider'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.jquery,
            slider = layui.slider,
            age = 0,
            sex = $("#sex").val();

        form.val("test", {
            "ssex": sex
        });


        getDept();

        /*初始化【部门】下拉列表框*/
        function getDept() {
            $.ajax({
                type: "GET",
                url: "/getDeptList",
                dataType: "json",
                success: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        $("#deptId").append("<option value=\"" + data[i].deptId + "\">" + data[i].deptName +
                            "</option>");
                        $('#deptId').val($("#deptIds").val());
                    }
                    layui.form.render("select");
                }
            });
        };

        /*滑块初始化*/
        var ageSl = slider.render({
            elem: "#age",
            theme: '#5FB878',
            min: 0,
            max: 150,
            setTips: function (value) {
                age = value;
                return value + '岁';
            }
        });
        ageSl.setValue($("#ages").val());

        /*保存事件*/
        form.on('submit(saveBtn)', function (data) {
            if ($('#dieType').val() === '') {
                layer.msg("请选择死亡类型！", {icon: 3});
                return;
            } else if ($('#dieWhy').val() === '') {
                layer.msg("请选择死亡原因！", {icon: 3});
                return;
            }
            //数据封装
            var updateInfo = {
                dieId: $('#dieId label').text(),
                username: $('#username').val().trim(),
                dieWhy: $('#dieWhy').val(),
                dieType: $('#dieType').val()
            };
            layer.confirm("确认修改吗？",{icon: 3}, function (index) {
                /*发送修改请求*/
                $.ajax({
                    type: 'PUT',
                    dataType: 'text',
                    url: '/diebookModify',
                    data: {updateInfo: JSON.stringify(updateInfo)},
                    error: function () {
                        layer.alert("系统错误！");
                    },
                    success: function (result) {
                        if (result === 'success') {
                            layer.alert('修改成功！',
                                {
                                    title: '成功',
                                    skin: 'layui-layer-molv',
                                    btn: ['返回'],
                                    anim: 1,
                                    icon: 6,
                                    yes: function () {
                                        parent.layui.table.reload('testId', {
                                            page: {
                                                curr: 1
                                            },
                                        });
                                        layer.close(index);
                                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                                    }
                                });
                        } else {
                            layer.alert('修改失败，请重试？',
                                {
                                    title: '错误',
                                    skin: 'layui-layer-molv',
                                    btn: ['重试', '退出'],
                                    anim: 1,
                                    icon: 5,
                                    yes: function (index) {
                                        layer.close(index);
                                    },
                                    btn2: function () {
                                        layer.close(index);
                                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                                    }
                                });
                        }
                    }
                });
            });
            return false;
        });
    });
</script>
</body>
</html>